<template>
  <div class="main">
    <div class="center">
      <img src="../../../assets/football/宣传效果图.jpg" />
      <div class="rules" @click="showRules"></div>
    </div>
    <el-dialog title="活动规则" :visible.sync="rulesVisible" width="30%" center>
      <img src="../../../assets/football/规则说明.png" alt />
      <span slot="footer" class="dialog-footer">
        <el-button @click="centerDialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="centerDialogVisible = false">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>
<script>
export default {
  data() {
    return {
      rulesVisible: false,
    }
  },
  methods: {
    showRulesFn() {
      this.rulesVisible = true
    },
  },
}
</script>
<style  lang='stylus' scoped>
.main {
  width: 100%;
  height: 100vh;
  background-image: url('../../../assets/login_bg.svg');
  display: flex;
  justify-content: center;

  .center {
    position: relative;
    box-shadow: 0 0 5px 1px #999;

    img {
      margin: 0 auto;
      height: 100vh;
    }

    .rules {
      position: absolute;
      bottom: 12px;
      right: 18px;
      width: 50px;
      height: 35px;
      // background-color: #ccc;
    }
  }
}
</style>
